<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :model="form"
          :inline="true"
          label-width="68px"
        >
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="handlecreateOrder"
            >创建订单</el-button>
          </el-form-item>
          <el-form-item label="服装编号" prop="costumeNo">
            <el-input
              v-model="form.costumeNo"
              placeholder="请输入服装编号"
              clearable
              @keyup.enter.native="handleEnterCostume"
            />
            </el-form-item>
           <el-form-item label="选择尺码" prop="size">
            <el-input
              v-model="form.size"
              placeholder="请输入尺码编号"
              clearable
              @keyup.enter.native="handleEnterCostume"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              :disabled="BtnDisabled"
              @click="handleEnterCostume"
            >录入服装信息</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-collapse v-model="activeCollapseName">
        <!-- <el-collapse-item title="订单信息" name="one"> -->
          <el-form :model="orderVO" label-width="120px">
            <!-- <el-form-item label="订单总览"></el-form-item> -->
            <!-- <el-col :span="12">
              <el-card> -->
                <el-col :span="64">
                  <el-form-item label="订单编号:">{{ orderVO.orderNo }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="订单时间:">{{ orderVO.saleTime }}</el-form-item>
                </el-col>
              <!-- </el-card>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-card> -->
                <el-col :span="6">
                  <el-form-item label="服装总件数:">
                    <div class="card-panel-num1">{{ orderVO.totalQuantity }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="总金额:">
                    <div class="card-panel-num2">{{ orderVO.totalAmount }}</div>
                  </el-form-item>
                <!-- </el-col>
              </el-card> -->
            </el-col>
          </el-form>
        <!-- </el-collapse-item> -->
      </el-collapse>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <el-button type="danger" round icon="el-icon-delete" @click="clearAllData"> 取消订单 </el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="success" round icon="el-icon-check" :disabled="BtnDisabled" @click="confirmSubmit"> 确认下单 </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
          <el-tab-pane label="待下单服装列表" name="first">
            <el-table :data="costumeOrderVOList">
              <!-- <el-table-column label="序号" align="center" prop="" width="55" /> -->
              <el-table-column label="服装名称" align="center" prop="costumeName" />
              <el-table-column label="服装编号" align="center" prop="costumeNo" />
              <el-table-column label="尺码" align="center" prop="size" />
              <el-table-column label="单价" align="center" prop="salePrice" />
              <el-table-column label="数量" align="center" prop="quantity" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { createOrder, identifyCostume, commitOrder } from '@/api/costumeShop/saleOrderCostume'
export default {
  name: 'Borrow',
  data() {
    return {
      // 借书按钮状态
      BtnDisabled: false,
      //订单状态
      orderVO:[],
      // 购物车待下单服装列表
      costumeOrderVOList: [],
      // 服装录入订单信息
      form: {
        costumeNo: undefined,
        size: undefined,
      },
      inputVO: {
        orderNo: undefined,
        costumeNo: undefined,
        size: undefined,
      },
      // 激活的tab名称
      activeTabName: 'first',
      // 展开的折叠面板
      activeCollapseName: 'one'
    }
  },
  created() {

  },
  methods: {
    /** 创建订单，生成订单*/
    handlecreateOrder() {
      createOrder().then((response) => {
        this.inputVO.orderNo = response.orderNo
        console.log(this.inputVO.orderNo)
      })
      // this.activeTabName = 'second'
    },
    /** 录入商品，加入购物车 */
    handleEnterCostume() {
      // this.activeTabName = 'first'
      this.inputVO.costumeNo = this.form.costumeNo;
      this.inputVO.size = this.form.size;
      identifyCostume(this.inputVO).then((response) => {
        this.costumeOrderVOList = response.orderCostumeList
        this.orderVO = response.currentOrderVo
      })
    },

    /** 切换tab ,刷新该tab*/
    handleTabClick(tab, event) {
    },
    /** 确认下单 */
    confirmSubmit() {
      commitOrder(this.orderVO).then((response) => {
        const flag = response
        if (flag) {
          this.clearAllData()
          this.$message.success('下单成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
  .card-panel-num1 {
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>
